<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="/facelets/templates/zona-privada-principal.xhtml">

	<ui:define name="title"> Gesti&#243;n de grupos </ui:define>
	<ui:define name="nameForm"> Gesti&#243;n de grupos </ui:define>
	<ui:define name="content">
		<p:growl id="growl" showDetail="true" globalOnly="true" sticky="false" />
		<h:form styleClass="ui-widget" id="formBusqueda" prependId="false">
			<div id="sub-header">
				<div id="nameForm">Gesti&#243;n de grupos</div>
				<div id="toolBar">
					<p:commandLink id="buscar" styleClass="butonSmall" 
								   action="#{gestionGruposController.buscarGrupos}" update="plgDtGrupos">
						<h:graphicImage library="images" name="buscar.png" styleClass="toolbar-icon" 
										alt="buscar" title="Buscar" />
					</p:commandLink>
					<p:spacer width="10" />
					<p:commandLink id="limpiar" styleClass="butonSmall" process="@this" 
								   action="#{gestionGruposController.limpiar}" update="plgFiltro" global="false">
						<h:graphicImage library="images" name="limpiar.png"
										styleClass="toolbar-icon" alt="Limpiar" title="Limpiar" />
					</p:commandLink>
					<p:spacer width="10" />
					<p:commandLink id="nuevo" styleClass="butonSmall"  
								   action="#{gestionGruposController.abrirNuevoGrupo}"
								   update=":formGrupoNuevo" global="false"
								   oncomplete="wvDlgGrupoNuevo.show();limpiarFormularioSoloInput('panelNuevoGrupo');">
						<h:graphicImage library="images" name="nuevo.png" styleClass="toolbar-icon" 
										alt="Nuevo" title="Nuevo" />
					</p:commandLink>
					<p:defaultCommand target="buscar" /> 
				</div>
			</div>
			<div id="content">
				<div class="panel-filtro" >
					<h:panelGroup id="plgFiltro">
						<p:panelGrid columns="6">
							<h:outputLabel value="C&#243;digo: " styleClass="label-general" />
							<p:inputText value="#{gestionGruposController.grupo.codigo}" maxlength="10"
										 styleClass="input-general" />

							<h:outputLabel value="Descripci&#243;n: " styleClass="label-general" />
							<p:inputText maxlength="50" value="#{gestionGruposController.grupo.descripcion}"
										 styleClass="input-general" />

							<h:outputLabel value="Estado: " styleClass="label-general" />
							<p:selectOneMenu id="cboEstadoGrupo" value="#{gestionGruposController.grupo.estado}" 
											 styleClass="select-general">
								<f:selectItem itemLabel="Seleccione" itemValue="-" />
								<f:selectItem itemLabel="Activo" itemValue="A" />
								<f:selectItem itemLabel="Inactivo" itemValue="I" />
							</p:selectOneMenu>
						</p:panelGrid>
					</h:panelGroup>
				</div>

				<p:spacer height="25" />
				<div class="divResultados">
					<h:panelGroup id="plgDtGrupos">
						<p:dataTable id="dtGrupos" var="grupo" value="#{gestionGruposController.listaGrupo}" 
									 rowKey="#{grupo.codigo}" emptyMessage=""
									 paginator="true" paginatorPosition="top" rows="10"
									 paginatorTemplate="{FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
									 currentPageReportTemplate="{currentPage} de {totalPages}" >
							
							<p:column id="colCodigo" headerText="C&#243;digo"  sortFunction="#{ordenarDatatable.ordernar}" 
									  sortBy="#{grupo.codigo}" style="width:125px">
								<h:outputText value="#{grupo.codigo}"  />
							</p:column>
							
							<p:column id="colNombre" headerText="Descripci&#243;n" sortFunction="#{ordenarDatatable.ordernar}" 
									  sortBy="#{grupo.nombre}">
								<h:outputText value="#{grupo.nombre}"/>
							</p:column>
							
							<p:column id="colEstado" headerText="Estado" sortFunction="#{ordenarDatatable.ordernar}"
									  style="width:125px" sortBy="#{grupo.estado}">
								<h:outputText value="#{grupo.estado}">
									<f:converter converterId="estadoConverter" />
								</h:outputText>
							</p:column>
							
							<p:column style="width:2%">
								<f:facet name="header">
									<h:outputText value=" " />
								</f:facet>
								<p:commandLink id="cmlGrupoEditar" title="Editar"
											   action="#{gestionGruposController.elegirEditarGrupo(grupo)}"
											   update=":formGrupoEditar:panelGrupoEditar"
											   oncomplete="wvDlgGrupoEditar.show();"
											   process=":formBusqueda:plgDtGrupos" global="false">
									<h:graphicImage library="images" name="editar.png" styleClass="icon-small" 
													alt="Editar" title="Editar" />
								</p:commandLink>
							</p:column>
							<p:column style="width:2%">
								<f:facet name="header">
									<h:outputText value=" " />
								</f:facet>
								<p:commandLink id="cmlGrupoEliminar" immediate="true" global="false"
											   action="#{gestionGruposController.elegirEliminarGrupo(grupo)}"
											   oncomplete="wvDlgGrupoEliminar.show();"
											   title="Eliminar">
									<h:graphicImage library="images" name="eliminar.png"
													styleClass="icon-small" alt="Eliminar" title="Eliminar" />
								</p:commandLink>
							</p:column>
							
							<f:facet name="footer">
								<div class="pie-cantidad-resultados">
									<h:outputText
										rendered="#{gestionGruposController.listaGrupo.size()>0}"
										value="Se encontraron #{gestionGruposController.listaGrupo.size()} grupos." />
									<h:outputText
										rendered="#{gestionGruposController.listaGrupo.size()==0}"
										value="No se encontraron grupos." />
								</div>
							</f:facet>
						</p:dataTable>
					</h:panelGroup>
				</div>
			</div>
		</h:form>


		<!--Dialog  Nuevo Grupo-->

		<p:dialog id="dlgGrupoNuevo" widgetVar="wvDlgGrupoNuevo"
				  closable="true" header="Nuevo grupo" modal="true"
				  resizable="false">
			<h:form styleClass="ui-widget" id="formGrupoNuevo" prependId="false">
				<div class="panel-general-popup">
					<h:panelGroup id="panelNuevoGrupoPopUp">
						<div class="panel-general-popup">
							<div class="panel-formulario" align="center">
								<p:panelGrid id="panelNuevoGrupo" columns="2">
									<h:outputLabel styleClass="label-general">C&#243;digo: <span>( * )</span>
									</h:outputLabel>
									<p:inputText id="codigoGrupoNuevo" value="#{gestionGruposController.grupoNuevo.codigo}" 
												 maxlength="10" required="true" requiredMessage="C&#243;digo: Requerido." 
												 styleClass="input-general" title="C&#243;digo del grupo">
										<f:validator validatorId="codigoGrupoValidator"/>
										<f:attribute name="campo" value="C&#243;digo " />
										<p:ajax update="msgCodigoGrupoNuevo" global="false"/>
									</p:inputText>


									<h:outputLabel styleClass="label-general">Descripci&#243;n: <span>( * )</span>
									</h:outputLabel>
									<p:inputText id="nombreGrupoNuevo" value="#{gestionGruposController.grupoNuevo.nombre}"
												 maxlength="50" required="true"
										 		 styleClass="input-general"
												 title="Descripci&#243;n del grupo" requiredMessage="Descripci&#243;n: Requerido.">
										<f:validator validatorId="nombreGrupoValidator"/>
										<f:attribute name="campo" value="Descripci&#243;n" />
										<p:ajax update="msgNombreGrupoNuevo" global="false"/>
									</p:inputText>


									<h:outputLabel styleClass="label-general">Estado: <span>( * )</span>
									</h:outputLabel>
									<p:selectOneMenu id="estadoGrupoNuevo" value="#{gestionGruposController.grupoNuevo.estado}" 
													 styleClass="select-general">
										<f:selectItem itemLabel="Activo" itemValue="A" />
										<f:selectItem itemLabel="Inactivo" itemValue="I" />
									</p:selectOneMenu>

								</p:panelGrid>

							</div>

							<div class="panel-botones" align="center">
								<p:commandButton value="Guardar"
												 process="@this, panelNuevoGrupo" styleClass="buton-general"
												 action="#{gestionGruposController.guardarNuevoGrupo}"
												 icon="ui-icon-disk"
												 oncomplete="ocultarDialogSiOperacionEsCorrecta(xhr, status, args,wvDlgGrupoNuevo)"
												 update="panelNuevoGrupoPopUp,:formBusqueda:plgDtGrupos,:growl" />
								<p:spacer width="5" />
								<p:commandButton value="Salir" immediate="true"
												 icon="ui-icon-arrowreturn-1-w" styleClass="buton-general"
												 onclick="wvDlgGrupoNuevo.hide()" global="false"/>
							</div>
							
							<div class="panelMessages" >
								<p:message id="msgCodigoGrupoNuevo" for="codigoGrupoNuevo" />
								<p:message id="msgNombreGrupoNuevo" for="nombreGrupoNuevo" />
							</div>
						</div>
					</h:panelGroup>
				</div>
			</h:form>
		</p:dialog>

		<!--Dialog  Editar Grupo-->
		<p:dialog id="dlgGrupoEditar" widgetVar="wvDlgGrupoEditar"
				  closable="true" header="Editar grupo" modal="true"
				  resizable="false">
			<h:form styleClass="ui-widget" id="formGrupoEditar" prependId="false">
				<h:panelGroup id="panelGrupoEditar">
					<div class="panel-general-popup">
						<div class="panel-formulario" >
							<p:panelGrid id="panelEditarGrupo" columns="2">
								
								<h:outputLabel styleClass="label-general">C&#243;digo: <span>( * )</span>
								</h:outputLabel>
								<p:inputText id="codigoGrupoEditar" value="#{gestionGruposController.grupoEditar.codigo}" 
										     maxlength="10" required="true" styleClass="input-general"
											 title="C&#243;digo del grupo" requiredMessage="C&#243;digo: Requerido.">
									<f:validator validatorId="codigoGrupoValidator" />
									<f:attribute name="campo" value="C&#243;digo" />
									<p:ajax update="msgcodigoGrupoEditar" />
								</p:inputText>
								
								<h:outputLabel styleClass="label-general">Descripci&#243;n: <span>( * )</span>
								</h:outputLabel>
								<p:inputText id="nombreGrupoEditar" value="#{gestionGruposController.grupoEditar.nombre}"
											 maxlength="50" required="true" styleClass="input-general"
											 title="Descripci&#243;n del grupo" requiredMessage="Descripci&#243;n: Requerido.">
									<f:validator validatorId="nombreGrupoValidator" />
									<f:attribute name="campo" value="Descripci&#243;n" />
									<p:ajax update="msgNombreGrupoEditar" />
								</p:inputText>

								<h:outputLabel styleClass="label-general">Estado: <span>( * )</span>
								</h:outputLabel>
								<p:selectOneMenu id="estadoGrupoEditar" value="#{gestionGruposController.grupoEditar.estado}" 
									 			 styleClass="select-general">
									<f:selectItem itemLabel="Activo" itemValue="A" />
									<f:selectItem itemLabel="Inactivo" itemValue="I" />
								</p:selectOneMenu>

							</p:panelGrid>
						</div>
						<div class="panel-botones" align="center">
							<p:commandButton value="Guardar" actionListener="#{gestionGruposController.actualizarGrupo}"
											 styleClass="buton-general" icon="ui-icon-disk"
											 oncomplete="ocultarDialogSiOperacionEsCorrecta(xhr, status, args,wvDlgGrupoEditar)"
											 update="panelGrupoEditar,:growl,:formBusqueda:plgDtGrupos" />
							<p:spacer width="5" />
							<p:commandButton value="Salir" immediate="true"
											 icon="ui-icon-arrowreturn-1-w" styleClass="buton-general"
											 onclick="wvDlgGrupoEditar.hide()" global="false"/>
						</div>
						<div class="panelMessages">
							<p:message id="msgcodigoGrupoEditar" for="codigoGrupoEditar" />
							<p:message id="msgNombreGrupoEditar" for="nombreGrupoEditar" />
						</div>
					</div>
				</h:panelGroup>
			</h:form>
		</p:dialog>


		<!--			Dialog  Eliminar Grupo			-->

		<p:dialog id="dlgGrupoEliminar" widgetVar="wvDlgGrupoEliminar"
			closable="true" header="Eliminar grupo"
			modal="true" resizable="false">
			<h:form styleClass="ui-widget" prependId="false">
				<div class="panelEliminar">
					<h:outputText value=" &#191;Est&#225; seguro de eliminar el grupo?" />
				</div>					
				<div class="panel-botones">
					<p:commandButton value="S&#237;" icon="ui-icon ui-icon-check"
						actionListener="#{gestionGruposController.eliminarGrupo}"
						styleClass="buton-general" 
						update=":growl,:formBusqueda:plgDtGrupos"
						oncomplete="wvDlgGrupoEliminar.hide()" />
					<p:spacer width="5" />
					<p:commandButton value="No" icon="ui-icon ui-icon-close" global="false"
						styleClass="buton-general" onclick="wvDlgGrupoEliminar.hide()" />
				</div>				
			</h:form>
		</p:dialog>

	</ui:define>
</ui:composition>